// 脚手架给开发者提供的来增量配置webpack设置
// 此文件就可以让我们配置开发服务器 npm run serve 启动的服务器
// 给开发服务器添加一个代理的功能
// 此文件修改后，一定要重启服务

const path = require('path')
const fs = require('fs')
const { defineConfig } = require('@vue/cli-service')

// const cinemasMock = require('./mock/cinema')

// 列表
const mocks = []
// 得到mock目录路径 绝对路径
const mockPath = path.resolve('./mock')
// 读取目录下面的.js文件
const files = fs.readdirSync(mockPath)
files.forEach(fileName => {
  mocks.push(require(path.join(mockPath, fileName)))
})

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,

  // 开发时服务器设置 https://webpack.docschina.org/configuration/dev-server/
  // 请求的地址一定是同域下，然后它才能拦截，才能进行代理处理
  // express服务器
  devServer: {
    // mock服务
    // app就是express实例对象,可以用它来完成mock服务接口
    setupMiddlewares: (middlewares, { app }) => {
      // app.get('/api/cinemas/cities/:cityid', (req, res) => {
      //   res.send({
      //     code: 0,
      //     msg: 'ok',
      //     data: [
      //       { id: 1, name: '全城' },
      //       { id: 2, name: '西城区' },
      //       { id: 3, name: '东城区' },
      //       { id: 4, name: '昌平区' }
      //     ]
      //   })
      // })
      // cinemasMock(app)

      mocks.forEach(fn => fn(app))

      return middlewares
    },
    // 代理，此配置只能在开发时有用，生产中不能使用，要想用，只能用nodejs来写
    proxy: {
      // 模糊匹配
      // 请求地址是以 /api 开头的，才进行拦截
      '/api': {
        // 把请求域名指向到真实的目标地址上
        target: 'https://api.iynn.cn/film',
        // 修改请求中host头信息的内容，让他和 target的目标域名一致，为了代理不出问题
        changeOrigin: true
      }
    }
  }
})
